import StateHook from "./StateHook"
import EffectHook from "./EffectHook"
import ContextHook from "./ContextHook"
import ReducerHook from "./ReducerHook"
import RefHook from "./RefHook"
import { useState } from "react"
import { Button } from "antd"

export default function Hook() {
    let [count,setCount] = useState(233)
    let [selectHook,setSelectHook] = useState('state')
    return (
        <div>
            <div>
                <Button onClick={() => setSelectHook('state')}>State Hook</Button>
                <Button onClick={() => setSelectHook('effec')} style={{marginLeft: '15px'}}>EffectHook</Button>
                <Button onClick={() => setSelectHook('context')} style={{marginLeft: '15px'}}>ContextHook</Button>
                <Button onClick={() => setSelectHook('reducer')} style={{marginLeft: '15px'}}>ReducerHook</Button>
                <Button onClick={() => setSelectHook('ref')} style={{marginLeft: '15px'}}>RefHook</Button>
            </div>
            <div className="allCateCln">
                {
                    selectHook === 'state' ? <StateHook count={count} setCount={() => setCount(++count)}></StateHook> : 
                        selectHook === 'effec' ? <EffectHook count={count} setCount={() => setCount(++count)}></EffectHook> :
                            selectHook === 'context' ? <ContextHook></ContextHook> : 
                                selectHook === 'reducer' ? <ReducerHook></ReducerHook> :
                                <RefHook></RefHook>
                }
            </div>
        </div>
    )
}
